<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .router-link-exact-active{
            color:white;
            background-color: green;
        }
    </style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.1/dist/vue-router.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<body>
    <div id="app">
        <keep-alive include="Home">
            <router-view></router-view>
        </keep-alive>
    </div>

    <template id="daohangTemp">
        <div style="display: flex;align-items: center;justify-content:space-between">
            <router-link to="/" >班级首页 </router-link>

            <router-link to="/about">班级详情</router-link>

            <router-link to="/person">个人详情</router-link>
        </div>
    </template>
    
    <!----定义一些组件-->
    <template id="HomeTemp">
            <div>
                <daohang></daohang>
                <div>
                    <span style="text-align: center;">班级首页</span>
                    <br>
                    <span>被点击了{{clickCounter}}次</span>
                    <br>
                    <button @click="clickBtnHandler"> 点击增加</button>
                </div>
            </div>
    </template>


    <template id="AboutTemp">
        <div>
            <daohang></daohang>
            <br>
            <div>
                <span>{{class_name}}</span>
                <ul>
                    <li v-for="item in courseList">{{item.courseName}} ({{item.teacherName}})</li>
                </ul>
            </div>
        </div>
    </template>


    <template id="PersonTemp">
        <div>
            <daohang></daohang>
            <br>
            <div>
                <span>姓名：{{studentName}}</span>
                <br>
                <img :src="studentImg" style="width: 200px;"/>
            </div>
        </div>
    </template>

</body>
<script>

    var daoHang=Vue.component('daohang', {template: '#daohangTemp'});
    var Home=Vue.component('Home', {
        template: '#HomeTemp',
        data:function(){
            return {
                clickCounter:0
            }
        },
        methods:{
            clickBtnHandler:function(){
                this.clickCounter++;
            }
        },
        created:function(){
            console.log("组件被创建了");
        },
        mounted:function(){
            console.log("组件被加载了");
            this.clickCounter=100;
        },
        updated:function(){
            console.log("组件被修改了");
        },
        destroyed:function(){
            console.log("组件被销毁了");
        }
    });



    var About=Vue.component('About', {
        template: '#AboutTemp',
        data:function(){
            return{
                class_name:"",
                courseList:[]
            }
        },
        mounted:function(){
            const aboutComponent=this;
            aboutComponent.class_name="我要加载的班级名";
            aboutComponent.courseList=[{"courseName":"一个课名","teacherName":"其中一个老师名"}];
            // 为给定 ID 的 user 创建请求
            axios.get('../student.json').then(
                function (res) {
                    //console.log("Axios请求成功");
                    //console.log(res);
                    if(res.status==200){
                        console.log(res.data.className);
                        aboutComponent.class_name=res.data.className;
                        console.log("-----------------");
                        console.log(res.data.courseList);
                        aboutComponent.courseList=res.data.courseList;
                    }
                }
            ).catch(
                function (error) {
                    console.log("Axios请求失败");
                    console.log(error);
                }
            );
        }
    });



    var Person=Vue.component('Person', {
        template: '#PersonTemp',
        data:function(){
            return {
                studentName:"还没加载JSON",
                studentImg:""
            }
        },
        methods:{
            loadStudentInfo:async function(){
                let that=this;
                //这里调用zuowei.json
                await axios.get('../zuowei.json').then(
                    function (res) {
                        //console.log("Axios请求成功");
                        //console.log(res);
                        if(res.status==200){
                            //网络请求小于1秒就第3个执行，大于1秒就第4个
                            that.studentName=res.data["1-2"];
                        }
                    }
                ).catch(
                    function (error) {
                        console.log("Axios请求失败");
                        console.log(error);
                    }
                );

                console.log(that.studentName);

                //这里调用student.json
                await axios.get('../student.json?123').then(
                    function (res) {
                        //console.log("Axios请求成功");
                        //console.log(res);
                        if(res.status==200){
                            console.log(res.data.students)
                            //取到数组中，姓名为that.studentName的同学数据
                            //that.studentImg=这个同学的头像

                            //let theStudentArray=res.data.students.filter(item => item.name===that.studentName);

                            let theStudentArray=res.data.students.filter(
                                function(item){
                                    if(item.name===that.studentName){
                                        return true
                                    }else{
                                        return false;
                                    }
                                }
                            );
                            if(theStudentArray.length>0){
                                console.log(theStudentArray[0].icon)
                                that.studentImg=theStudentArray[0].icon;
                            }

                            let theStudent={};
                            for(let i=0;i<res.data.students.length;i++){
                                let item=res.data.students[i];
                                if(item.name===that.studentName){
                                    theStudent=item;
                                }
                            }
                            console.log("for得到的"+theStudent.icon);

                        }
                    }
                ).catch(
                    function (error) {
                        console.log("Axios请求失败");
                        console.log(error);
                    }
                );
                
            }
        },
        created:function(){
            console.log("组件被创建了");
        },
        mounted:function(){
            this.loadStudentInfo();
        },
        updated:function(){
            console.log("组件被修改了");
        },
        destroyed:function(){
            console.log("组件被销毁了");
        }
    });

    // 创建 router 实例
    var router = new VueRouter({
      routes: [
        { path: '/', component: Home },
        { path: '/about', component: About },
        {path:"/person",component:Person}
      ]
    });

    // 创建和挂载根实例
    new Vue({
        el: '#app',
        router // 使用 router 插件
    })
</script>
</html>